<template>
	<div class="zhSowing">
		<div class="zhSowing-selected" ref="selected">
			<template>
			  <el-select v-model="imgObj.module" filterable @change="getData" placeholder="请选择">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</template>
		</div>
		<div class="zhSowing-tabs">
			<template>
			  <el-tabs v-model="activeName" @tab-click="handleClick">
			    <el-tab-pane label="海报1" name="1">
			    	<img v-if="imgObj.imglist.length > 0" ref="img1" :src="previewImgURL1" alt="">
			    	<img v-else src="" alt="">
			    	<div class="zhSowing-form">
						<h3>配置信息</h3>
						<el-form  label-width="80px" ref="form1" :model="imgObj.imglist[0]">
							<template >
								<el-form-item label="上传图片">
                                        <!-- @files-submitted="fileSubmit1" -->
									 <uploader 
										:options="uploadOptions" 
										:autoStart="false" 
										ref="uploader1" 
										:file-status-text="statusText1"
										@file-added="fileAddImg"
										@file-removed="fileRemoved1" 
										@files-submitted="fileSubmit1"
										@file-success="fileSuccess1" 
										@file-error="fileFail1"  
										class="uploader-example">
												<uploader-unsupport></uploader-unsupport>
												<uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow1" :single="true">上传图片</uploader-btn>
												<span class="showing-tips">支持图片格式的文件，建议尺寸：{{pic_rec}}px</span>
												<uploader-list></uploader-list>
									  </uploader>
								</el-form-item>
								<el-form-item label="链接地址" prop="link_url"
									:rules="formRules">
									<el-input class="link-name" v-model="imgObj.imglist[0].link_url" placeholder="请输入链接地址，如：http://www.baidu.com"></el-input>
								</el-form-item>
								<el-form-item label="是否启用">
									<el-switch v-model="imgObj.imglist[0].status" ></el-switch>
								</el-form-item>
							</template>
						</el-form>
					</div>
			    </el-tab-pane>
			    <el-tab-pane label="海报2" v-if="imgObj.module != '100'" name="2" class="s1000000000000000000">
			    	<img v-if="imgObj.imglist.length>1" ref="img2"  :src="previewImgURL2" alt="">
			    	<img v-else src="" alt="">
			    	<div class="zhSowing-form">
						<h3>配置信息</h3>
						<el-form  label-width="80px"   ref="form2" :model="imgObj.imglist[1]">
				    	<template>
							<el-form-item label="上传图片">
								<uploader :options="uploadOptions" :autoStart="false" ref="uploader2" :file-status-text="statusText2" @file-added="fileAddImg" @file-success="fileSuccess2"  @file-removed="fileRemoved2" @files-submitted="fileSubmit2" @file-error="fileFail2"  class="uploader-example">
								    <uploader-unsupport></uploader-unsupport>
								    <uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow2" :single="true">上传图片</uploader-btn>
                                    <span class="showing-tips">支持图片格式的文件，建议尺寸：{{pic_rec}}px</span>
								    <uploader-list></uploader-list>
								  </uploader>
							</el-form-item>
							<el-form-item label="链接地址" prop="link_url"
							:rules="formRules">
								<el-input class="link-name" v-model="imgObj.imglist[1].link_url" placeholder="请输入链接地址，如：http://www.baidu.com"></el-input>
							</el-form-item>
							<el-form-item label="是否启用">
								<el-switch v-model="imgObj.imglist[1].status" ></el-switch>
							</el-form-item>
						</template>
						</el-form>
					</div>
			    </el-tab-pane>
			    <el-tab-pane label="海报3" v-if="imgObj.module != '100'" name="3" class="s1000000000000000000">
			    	<img v-if="imgObj.imglist.length>2" ref="img3" :src="previewImgURL3" alt="">
			    	<img v-else src="" alt="">
			    	<div class="zhSowing-form">
						<h3>配置信息</h3>
						<el-form  label-width="80px"  ref="form3" :model="imgObj.imglist[2]">
				    	<template>
							<el-form-item label="上传图片">
								<uploader :options="uploadOptions" :autoStart="false" ref="uploader3" :file-status-text="statusText3" @file-added="fileAddImg" @file-removed="fileRemoved3" @file-success="fileSuccess3" @files-submitted="fileSubmit3" @file-error="fileFail3"  class="uploader-example">
								    <uploader-unsupport></uploader-unsupport>
								    <uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow3" :single="true">上传图片</uploader-btn>
                                    <span class="showing-tips">支持图片格式的文件，建议尺寸：{{pic_rec}}px</span>
								    <uploader-list></uploader-list>
								  </uploader>
							</el-form-item>
							<el-form-item label="链接地址" prop="link_url"
							:rules="formRules">
								<el-input class="link-name" v-model="imgObj.imglist[2].link_url" placeholder="请输入链接地址，如：http://www.baidu.com"></el-input>
							</el-form-item>
							<el-form-item label="是否启用">
								<el-switch v-model="imgObj.imglist[2].status"></el-switch>
							</el-form-item>
						</template>
						</el-form>
					</div>
			    </el-tab-pane>
			  </el-tabs>
			</template>
		</div>
		<div class="zhSowing-form">
			<el-form  label-width="80px">
				<el-form-item style="marginTop: 30px">
					<el-button size="medium" type="primary" plain  @click="resetForm()">重置</el-button>
					<el-button size="medium" type="primary" @click="saveBannerTemp()">保存</el-button>
				</el-form-item>
			</el-form>
        </div>	
        <el-dialog
			title="图片设置"
			:visible.sync="cropperViews"
			:width="cropperWidth"
			custom-class="croppering"
            :show-close="false"
			:close-on-click-modal="false"
            :close-on-press-escape="false">
			<div class="croppering">
				<div class="cropper">
					<vueCropper
						ref="cropper"
						:img="imgOption.img"
						:outputSize="imgOption.size"
						:outputType="imgOption.outputType"
						:info="true"
						:full="imgOption.full"
						:canMove="imgOption.canMove"
						:canMoveBox="imgOption.canMoveBox"
						:fixedBox="imgOption.fixedBox"
						:original="imgOption.original"
						:autoCrop="imgOption.autoCrop"
						:autoCropWidth="imgOption.autoCropWidth"
						:autoCropHeight="imgOption.autoCropHeight"
						:centerBox="imgOption.centerBox"
						:high="imgOption.high"
						:infoTrue="imgOption.infoTrue"
						:enlarge="imgOption.enlarge">
					</vueCropper>
				</div>
                <div slot="footer" class="dialog-footer cropper_btn">
                    <el-button  @click="clearFilet()">取消</el-button>
                    <el-button type="primary" @click="finish('base64')">确定</el-button>
                </div>
			</div>
		</el-dialog>	
	</div>
</template>
<script>
    import { VueCropper }  from 'vue-cropper' ;
    import {dataURLtoFile, uploaderFileFail} from './../../../tools/tool';
	let options = [
		{
			value: '1',
			label: '首页'
		}, {
			value: '2',
			label: '资源'
		}, {
			value: '3',
			label: '优课专辑'
		}, {
			value: '4',
			label: '公开课'
		}, {
			value: '5',
			label: '应用'
		}
	]
	let unitImg  = {
        id:0,
        name:'',
        picture:'',
        status:'1',
    }
	let statusText = {
        success: '上传成功',  
        error: '上传出错',  
        uploading: '正在上传...',  
        paused: '暂停',  
        waiting: '等待上传'  
    }
	export default {
        components: {
            VueCropper,
        },
		data(){
			return {
				cropperViews: false, // 是否显示图片裁剪的模态框
				cropperWidth: '1050px', // 容器的宽度
				imgOption: { // vue-cropper 参数配置
						img: '', // 裁剪图片的地址
						size: 1, // 裁剪生成图片的质量
						full: false, // 是否输出原图比例的截图
						outputType: 'png', //输出图片格式
						canMove: true, //能否拖动图片
						fixedBox: true, //截图框固定大小
						original: true, //否显示原始宽高
						canMoveBox: true,  //能否拖动截图框
						autoCrop: true, //autoCrop 是否自动生成截图框
						// 只有自动截图开启 宽度高度才生效
						autoCropWidth: 960,
						autoCropHeight: 210,
						centerBox: false, //截图框是否限制在图片里
						high: true //是否根据dpr生成适合屏幕的高清图片
				},
				pic_rec: '1920 * 420',
				imgObj:{
					module : '1',
					imglist:[unitImg, unitImg, unitImg],
				},
				options: options,
				activeName: '1',
				selectFileShow1:true,//是否显示选择文件按钮
				selectFileShow2:true,//是否显示选择文件按钮
				selectFileShow3:true,//是否显示选择文件按钮
				uploadOptions: {
							target: this.BASE_URL+'/api/resource/res_upload',
							testChunks: false,
							headers:{Authorization : `Bearer `+this.$g.access_token},
			    },
			    selectFileOrNot1:false,  //是否选中文件
			    selectFileOrNot2:false,  //是否选中文件
			    selectFileOrNot3:false,  //是否选中文件
			    attrs: {
			      	accept: ['image/*']
			    },
			    statusText1:deep_clone(statusText),
			    statusText2:deep_clone(statusText),
			    statusText3:deep_clone(statusText),
			    previewImgURL1:'',
			    previewImgURL2:'',
			    previewImgURL3:'',
			    onNumber:{
			    	selectNumber:0,
			    	uploadNumber:0
			    },
			    formRules:[
					{pattern:this.rules.link.reg,message:this.rules.link.msg, trigger: 'blur'}
			    ],
				imageType: ['image/jpeg', 'image/bmp', 'image/png'] // 上传图片格式
			}
		},
		created(){
			this.getData();		
		},
		watch:{
			'activeName':{
				handler(nn){
				}
			},
			'onNumber.uploadNumber':{
				handler(nn){
					if(nn === this.onNumber.selectNumber && nn > 0 ){
						this.saveBanner();
					}
				}
			}
		},
		methods: {
			saveBannerTemp(){
                let allow_submit = true;
                console.log(this.$refs.form3, this.$refs.form1, this.$refs.form2)
				// this.$refs.form1.validate((valid) => {
				// 	if ( !valid) {
				// 		allow_submit = false;
				// 		this.activeName = '1';
				// 		//滚动到底部
				// 		this.$nextTick(() => {
				// 			let imgH = this.$refs.img1.offsetHeight;
				// 			document.querySelector('.el-main').scrollTop=imgH;
				// 		})
				// 	}
        //         })
                
				// this.$refs['form2'] && this.$refs['form2'].validate((valid) => {
				// 	if ( !valid) {
				// 		if( allow_submit ){
				// 			this.activeName = '2';
				// 			this.$nextTick(() => {
				// 				let imgH = this.$refs.img2.offsetHeight;
				// 				document.querySelector('.el-main').scrollTop=imgH;
				// 			})
				// 		}
				// 		allow_submit = false;
				// 	}
        //         });
                
				this.$refs[`form${this.activeName}`] && this.$refs[`form${this.activeName}`].validate((valid) => {
					if ( !valid) {
						if( allow_submit ){
							// this.activeName = '3';
							this.$nextTick(() => {
								let imgH = this.$refs[`img${this.activeName}`].offsetHeight;
								document.querySelector('.el-main').scrollTop=imgH;
							})
						}
						allow_submit = false;
					}
                });
                
				if( !allow_submit ) {
					return false;
				}

				if( this.selectFileOrNot1 || this.selectFileOrNot2 || this.selectFileOrNot3 ){
					if( this.selectFileOrNot1 ){
						this.onNumber.selectNumber++;
						this.fileUpload1();
					}
					if( this.selectFileOrNot2 ){
						this.onNumber.selectNumber++;
						this.fileUpload2();
					}
					if( this.selectFileOrNot3 ){
						this.onNumber.selectNumber++;
						this.fileUpload3();
					}
				}else{
					this.saveBanner();
				}
			},
			saveBanner(){
				 let success = (data=>{
				 	this.$message.success(data.msg)
				 	this.selectFileOrNot1 = false;
				 	this.selectFileOrNot2 = false;
				 	this.selectFileOrNot3 = false;
				 	this.onNumber.selectNumber = 0;
				 	this.onNumber.uploadNumber = 0;
				 	this.$refs.uploader1.uploader.cancel();
				 	this.$refs.uploader2 && this.$refs.uploader2.uploader.cancel();
				 	this.$refs.uploader3 && this.$refs.uploader3.uploader.cancel();
				 	this.getData();
				 })
				this.$ajax.post('api/carousel/manage_banners',this.imgObj ,{func:{success:success}})	
			},
			getData(){
				//  超级管理员 独有轮播图 组织架构 选项----------
				if(this.$store.state.checkLevel) {
					let abj = {
						value: '100',
						label: '组织架构'
					}
					// 最顶级管理员并且 当前平台为itc教育局 时 添加一项
					if(sessionStorage.getItem('CheckSchoolAppCode') === "00000000000000000000000000000000" && this.options.length === 5) {
						this.options.push(abj)
					}
				}
				//  超级管理员 独有轮播图 组织架构 选项----------

				if( this.imgObj.module === '3' || this.imgObj.module === '4' ){
                    this.pic_rec = '860 * 400';
                    this.imgOption.autoCropWidth = 860;
                    this.imgOption.autoCropHeight = 400;
                    this.cropperWidth = '1050px';

				}else{
                    this.pic_rec = '1920 * 420';
                    this.imgOption.autoCropWidth = 960;
                    this.imgOption.autoCropHeight = 210;
                    this.cropperWidth = '1050px';
				}

				let success = (data=>{

                    
					if(this.imgObj.module == 100){
						// console.log(data.data[0])
						this.imgObj.imglist = [data.data[0]]
					}else{
						this.imgObj.imglist = data.data;
					}

            		if( this.imgObj.imglist.length === 0 ){
            			this.imgObj.imglist.push(deep_clone(unitImg))
            			this.imgObj.imglist.push(deep_clone(unitImg))
						this.imgObj.imglist.push(deep_clone(unitImg))
            		}else if( this.imgObj.imglist.length === 1 ){
            			this.imgObj.imglist.push(deep_clone(unitImg))
            			this.imgObj.imglist.push(deep_clone(unitImg))
            		}else if( this.imgObj.imglist.length === 2 ){
            			this.imgObj.imglist.push(deep_clone(unitImg))
                    }
                                        
                    this.selectFileShow1 = true;
                    this.$refs.uploader1.uploader.cancel();
                    this.previewImgURL1 = this.BASE_URL+this.imgObj.imglist[0].picture;
                    
                    this.selectFileShow2 = true;
                    this.$refs.uploader2 && this.$refs.uploader2.uploader.cancel();
                    this.previewImgURL2 = this.BASE_URL+this.imgObj.imglist[1].picture;
                    
                    this.selectFileShow3 = true;
                    this.$refs.uploader3 && this.$refs.uploader3.uploader.cancel();
                    this.previewImgURL3 = this.BASE_URL+this.imgObj.imglist[2].picture;
            	})
            	let fail = ( data => {
            		//this.loading.status = false;
            		this.$message.error(data.msg)
            	})

            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/carousel/manage_banners',{params: {module:this.imgObj.module},func:{success:success,fail:fail}})
            },
            fileAddImg(file, fileList) {
                // let file_type = file.fileType.toLocaleLowerCase();
                // if (!this.imageType.includes(file_type)) {
                //     this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
                // } else {
                    this.imgOption.img = window.URL.createObjectURL(file.file)
					// this.cropperViews = true;
                // }
            },
            //清空上传控件列表的数据
            clearFilet() {
                this.cropperViews = false;

                switch (this.activeName) {
                    case '1':
                        this.$refs.uploader1.uploader.cancel();
                        break;
                    case '2':
                        this.$refs.uploader2.uploader.cancel();
                        break;
                    case '3':
                        this.$refs.uploader3.uploader.cancel();
                        break;
                }                
            },
            //图片裁剪后替换原图片
            finish(type) {
                if (type === 'blob') {
			        this.$refs.cropper.getCropBlob((data) => {
			            this.$refs.uploader1.uploader.files[0].file = data;
                        this.$refs.uploader1.uploader.files[0].size = data.size;
                        this.$refs.uploader1.uploader.fileList[0].file = data;
                        this.$refs.uploader1.uploader.fileList[0].size = data.size;

                        this.previewImgURL1 = window.URL.createObjectURL(data);
                        this.selectFileOrNot1 = true;
                        this.selectFileShow1 = false;
                        this.cropperViews = false;
                        this.selectFileShowImg = false;
                        this.selectFileOrNotImg = true;
			        })
			    } else {
			        this.$refs.cropper.getCropData((data) => {
                        let modelView = null;

                        switch (this.activeName) {
                            case '1':
                                modelView = dataURLtoFile(data, this.$refs.uploader1.uploader.fileList[0].name, 'png');
                                break;
                            case '2':
                                modelView = dataURLtoFile(data, this.$refs.uploader2.uploader.fileList[0].name, 'png');
                                break;
                            case '3':
                                modelView = dataURLtoFile(data, this.$refs.uploader3.uploader.fileList[0].name, 'png');
                                break;
                        } 

                        if (modelView.size > 10240000) {
                            this.$message.warning('只允许上传10M以内的文件');
                            this.clearFilet();
                        } else {
                            switch (this.activeName) {
                                case '1':
                                    this.$refs.uploader1.uploader.files[0].file = modelView;
                                    this.$refs.uploader1.uploader.files[0].size = modelView.size;
                                    this.$refs.uploader1.uploader.fileList[0].file = modelView;
                                    this.$refs.uploader1.uploader.fileList[0].size = modelView.size;

                                    this.$refs.uploader1.uploader.fileList[0].fileType = 'image/png';
                                    this.$refs.uploader1.uploader.files[0].fileType = 'image/png';
                                    this.$refs.uploader1.uploader.fileList[0].name = this.$refs.uploader1.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader1.uploader.files[0].name = this.$refs.uploader1.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader1.uploader.fileList[0].relativePath = this.$refs.uploader1.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader1.uploader.files[0].relativePath = this.$refs.uploader1.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader1.uploader.fileList[0].uniqueIdentifier = modelView.size+"-"+this.$refs.uploader1.uploader.fileList[0].name;
                                    this.$refs.uploader1.uploader.fileList[0].chunks[0].endByte = modelView.size;

                                    this.previewImgURL1 = data;
                                    this.selectFileOrNot1 = true;
                                    this.selectFileShow1 = false;
                                    break;
                                case '2':
                                    this.$refs.uploader2.uploader.files[0].file = modelView;
                                    this.$refs.uploader2.uploader.files[0].size = modelView.size;
                                    this.$refs.uploader2.uploader.fileList[0].file = modelView;
                                    this.$refs.uploader2.uploader.fileList[0].size = modelView.size;

                                    this.$refs.uploader2.uploader.fileList[0].fileType = 'image/png';
                                    this.$refs.uploader2.uploader.files[0].fileType = 'image/png';
                                    this.$refs.uploader2.uploader.fileList[0].name = this.$refs.uploader2.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader2.uploader.files[0].name = this.$refs.uploader2.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader2.uploader.fileList[0].relativePath = this.$refs.uploader2.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader2.uploader.files[0].relativePath = this.$refs.uploader2.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader2.uploader.fileList[0].uniqueIdentifier = modelView.size+"-"+this.$refs.uploader2.uploader.fileList[0].name;
                                    this.$refs.uploader2.uploader.fileList[0].chunks[0].endByte = modelView.size;

                                    this.previewImgURL2 = data;
                                    this.selectFileOrNot2 = true;
                                    this.selectFileShow2 = false;
                                    break;
                                case '3':
                                    this.$refs.uploader3.uploader.files[0].file = modelView;
                                    this.$refs.uploader3.uploader.files[0].size = modelView.size;
                                    this.$refs.uploader3.uploader.fileList[0].file = modelView;
                                    this.$refs.uploader3.uploader.fileList[0].size = modelView.size;

                                    this.$refs.uploader3.uploader.fileList[0].fileType = 'image/png';
                                    this.$refs.uploader3.uploader.files[0].fileType = 'image/png';
                                    this.$refs.uploader3.uploader.fileList[0].name = this.$refs.uploader3.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader3.uploader.files[0].name = this.$refs.uploader3.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader3.uploader.fileList[0].relativePath = this.$refs.uploader3.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader3.uploader.files[0].relativePath = this.$refs.uploader3.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
                                    this.$refs.uploader3.uploader.fileList[0].uniqueIdentifier = modelView.size+"-"+this.$refs.uploader3.uploader.fileList[0].name;
                                    this.$refs.uploader3.uploader.fileList[0].chunks[0].endByte = modelView.size;

                                    this.previewImgURL3 = data;
                                    this.selectFileShow3 = false;
                                    this.selectFileOrNot3 = true;
                                    break;
                            } 

                            this.cropperViews = false;
                            this.selectFileShowImg = false;
							this.selectFileOrNotImg = true;
                        }
			        })
			    }
            },

			// 图片上传成功的事件  
			fileSuccess1 (rootFile, file, message, chunk) { 				
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );

			 	if(parseInt( mess.data.status ) ===1 ){
			 		this.imgObj.imglist[0].picture = mess.data.file_path;
			 		this.imgObj.imglist[0].newupload = 1;
			  		this.onNumber.uploadNumber++;
			  }
			  this.selectFileShow1  = true;
			},
			fileFail1(rootFile, file, message, chunk) {
                uploaderFileFail(this, this.$refs.uploader1.uploader, file, message);
            },            
			//过滤文件格式
			fileSubmit1(files, fileList, event){
				for (var i = 0 ; i < fileList.length ; i++ ) {
                    let file_type = fileList[i].fileType.toLocaleLowerCase();
                    
					if(!this.imageType.includes(file_type)) {
						this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片')
						this.$refs.uploader1.uploader.removeFile( fileList[i] );
					}else if( fileList[i].size > 10240000 ){
						this.$message.warning('只允许上传10M以内的文件');
						this.$refs.uploader1.uploader.removeFile( fileList[i] );
					}else{
						if( this.$refs.uploader1.uploader.fileList.length  > 1  ){
							//删除第一张图片
							this.$refs.uploader1.uploader.removeFile( this.$refs.uploader1.uploader.fileList[0] );
						}
						this.previewImgURL1 = window.URL.createObjectURL(fileList[i].file)
						this.selectFileOrNot1 = true;
						this.selectFileShow1 = false;
					}										
				}				
			},
			fileRemoved1(file){
				this.previewImgURL1 = this.BASE_URL+this.imgObj.imglist[0].picture;
				this.selectFileOrNot1 = false;
				this.selectFileShow1 = true;
			},
			fileUpload1(){
				this.$refs.uploader1.uploader.upload();
			},
			//上传成功的事件  
			fileSuccess2 (rootFile, file, message, chunk) { 
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );

			 	if(parseInt( mess.data.status ) ===1 ){
			 		this.imgObj.imglist[1].picture = mess.data.file_path;
			 		this.imgObj.imglist[1].newupload = 1;
			  		this.onNumber.uploadNumber++;
			  }
			 this.selectFileShow2  = true;
			},
			fileFail2( rootFile, file, message, chunk ){
				uploaderFileFail(this, this.$refs.uploader2.uploader, file, message);
			},
			//过滤文件格式
			fileSubmit2(files, fileList, event){
				for (var i = 0 ; i < fileList.length ; i++ ) {
                    let file_type = fileList[i].fileType.toLocaleLowerCase();
                    
					if(!this.imageType.includes(file_type)) {
						this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片')
						this.$refs.uploader2.uploader.removeFile( fileList[i] );
					}else if( fileList[i].size > 10240000 ){
						this.$message.warning('只允许上传10M以内的文件');
						this.$refs.uploader2.uploader.removeFile( fileList[i] );
					}else{
						if( this.$refs.uploader2.uploader.fileList.length  > 1  ){
							//删除第一张图片
							this.$refs.uploader2.uploader.removeFile( this.$refs.uploader2.uploader.fileList[0] );
						}
						this.previewImgURL2 = window.URL.createObjectURL(fileList[i].file)
						this.selectFileOrNot2 = true;
						this.selectFileShow2 = false;
					}
				}
			},			
			fileRemoved2(file){
				this.previewImgURL2 = this.BASE_URL+this.imgObj.imglist[1].picture;
				this.selectFileOrNot2 = false;
				this.selectFileShow2 = true;
			},
			fileUpload2(){				
				this.$refs.uploader2.uploader.upload();
			},
			//上传成功的事件  
			fileSuccess3 (rootFile, file, message, chunk) { 
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );
                
			 	if(parseInt( mess.data.status ) ===1 ){
			 		this.imgObj.imglist[2].picture = mess.data.file_path;
			 		this.imgObj.imglist[2].newupload = 1;
			  		this.onNumber.uploadNumber++;
			  }
			  this.selectFileShow3  = true;
			},
			fileFail3(rootFile, file, message, chunk) {
				uploaderFileFail(this, this.$refs.uploader3.uploader, file, message);
			},
			//过滤文件格式
			fileSubmit3(files, fileList, event){
				for (var i = 0 ; i < fileList.length ; i++ ) {
                    let file_type = fileList[i].fileType.toLocaleLowerCase();
                    
					if(!this.imageType.includes(file_type)) {
						this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片')
						this.$refs.uploader3.uploader.removeFile( fileList[i] );
					}else if( fileList[i].size > 10240000 ){
						this.$message.warning('只允许上传10M以内的文件');
						this.$refs.uploader3.uploader.removeFile( fileList[i] );
					}else{
						if( this.$refs.uploader3.uploader.fileList.length  > 1  ){
							//删除第一张图片
							this.$refs.uploader3.uploader.removeFile( this.$refs.uploader3.uploader.fileList[0] );
						}
						this.previewImgURL3 = window.URL.createObjectURL(fileList[i].file)
						this.selectFileOrNot3 = true;
						this.selectFileShow3 = false;
					}
				}
			},			
			fileRemoved3(file){
				this.previewImgURL3 = this.BASE_URL+this.imgObj.imglist[2].picture;
				this.selectFileOrNot3 = false;
				this.selectFileShow3 = true;
			},
			fileUpload3(){
				this.$refs.uploader3.uploader.upload();
			},
			resetForm(){
				this.getData();
			},
			handleClick(tab, event) {
				console.log(tab, event)
      },
		}
	}
</script>

<style lang="scss">
	.zhSowing{
		.uploader-file-pause{
			display: none !important;
		}
		.zhSowing-selected{
			width: 200px;
			height: 36px;
			line-height: 36px;
			.el-input__inner{
				border-radius: 0;
			}
		}
		.zhSowing-tabs{
			margin-top: 40px;
			.el-tabs__nav-wrap{
				&::after{
					display: none;
				}
			}
			.is-active{
				background: none;
				color: #409EFF;
			}
			.el-tab-pane{
				>img{
					max-width: 100%;
				}
			}
			
		}
		.zhSowing-form{
            .showing-tips {
                margin-left: 10px;
                font-size: 14px;
                color: #aaa;
            }

			.up{
				border: 0;
				color: #7C9BB8;
				background: #DEEFFF;
				border-radius: 3px;
				margin-right: 20px;
			}
			.upTXT{
				font-size: 14px;
			}
			.link-name{
				width: 470px;
				>input{
					border-radius: 0;
				}
			}
			.xxx{
				background: #348EFC;
				border-radius: 3px;
				padding: 9px 30px;
			}
        }
        
        .croppering {
			.cropper {
				height: 500px;
				
				>div{
					height: 100%;
				}
			}

            .dialog-footer {
                padding: 35px 0;
                text-align: center;

                button {
                    padding: 10px 30px;
                }
            }

            .vue-cropper {
                position: relative;
                width: 100%;
                height: 500px;
                box-sizing: border-box;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                direction: ltr;
                touch-action: none;
                text-align: left;
                background-image: url("");
            }

            .cropper-box,
            .cropper-box-canvas,
            .cropper-drag-box,
            .cropper-crop-box,
            .cropper-face {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                user-select: none;
            }

            .cropper-box-canvas img {
                position: relative;
                text-align: left;
                user-select: none;
                transform: none;
                max-width: none;
                max-height: none;
            }

            .cropper-box {
                overflow: hidden;
            }

            .cropper-move {
                cursor: move;
            }

            .cropper-crop {
                cursor: crosshair;
            }

            .cropper-modal {
                background: rgba(0, 0, 0, 0.5);
            }
            
            .cropper-view-box {
                display: block;
                overflow: hidden;
                width: 100%;
                height: 100%;
                outline: 1px solid #39f;
                outline-color: rgba(51, 153, 255, 0.75);
                user-select: none;
            }

            .cropper-view-box img {
                user-select: none;
                text-align: left;
                max-width: none;
                max-height: none;
            }

            .cropper-face {
                top: 0;
                left: 0;
                background-color: #fff;
                opacity: 0.1;
            }

            .crop-info {
                position: absolute;
                left: 0px;
                min-width: 65px;
                text-align: center;
                color: white;
                line-height: 20px;
                background-color: rgba(0, 0, 0, 0.8);
                font-size: 12px;
            }

            .crop-line {
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                opacity: 0.1;
            }

            .line-w {
                top: -3px;
                left: 0;
                height: 5px;
                cursor: n-resize;
            }

            .line-a {
                top: 0;
                left: -3px;
                width: 5px;
                cursor: w-resize;
            }

            .line-s {
                bottom: -3px;
                left: 0;
                height: 5px;
                cursor: s-resize;
            }

            .line-d {
                top: 0;
                right: -3px;
                width: 5px;
                cursor: e-resize;
            }

            .crop-point {
                position: absolute;
                width: 8px;
                height: 8px;
                opacity: 0.75;
                background-color: #39f;
                border-radius: 100%;
            }

            .point1 {
                top: -4px;
                left: -4px;
                cursor: nw-resize;
            }

            .point2 {
                top: -5px;
                left: 50%;
                margin-left: -3px;
                cursor: n-resize;
            }

            .point3 {
                top: -4px;
                right: -4px;
                cursor: ne-resize;
            }

            .point4 {
                top: 50%;
                left: -4px;
                margin-top: -3px;
                cursor: w-resize;
            }

            .point5 {
                top: 50%;
                right: -4px;
                margin-top: -3px;
                cursor: e-resize;
            }

            .point6 {
                bottom: -5px;
                left: -4px;
                cursor: sw-resize;
            }

            .point7 {
                bottom: -5px;
                left: 50%;
                margin-left: -3px;
                cursor: s-resize;
            }

            .point8 {
                bottom: -5px;
                right: -4px;
                cursor: se-resize;
            }
        }
	}
</style>